<include file="public@header"/>
<style type="text/css">
    .pic-list li {
        margin-bottom: 5px;
    }
</style>

</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('AdminGuests/index')}">用户说列表</a></li>
        <li class="active"><a href="#">添加</a></li>
    </ul>
    <form action="{:url('AdminGuests/add')}" method="post" class="form-horizontal js-ajax-form margin-top-20">
        <div class="row">
            <div class="col-md-9">
                <table class="table table-bordered">
                    <tr>
                        <th style="text-align: center">用户说图片(必填312*213)</th>
                        <td>
                            <div>
                                <input type="hidden" name="img" class="form-control"
                                       id="js-thumbnail-input" required>
                                <div>
                                    <a href="javascript:uploadOneImage('图片上传','#js-thumbnail-input');">
                                        <img src="__TMPL__/public/assets/images/default-thumbnail.png"
                                             id="js-thumbnail-input-preview"
                                             width="135" style="cursor: pointer"/>
                                    </a>
                                    <input type="button" class="btn btn-sm btn-cancel-thumbnail" value="取消图片"><font style="color: red">请把图片大小控制在500k以内！</font>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr >
                        <th style="text-align: center">用户说内容（必填）</th>
                        <td>
                             <textarea class="form-control" name="content" style="height: 40px;"
                                       placeholder="格式：请填写内容">
                            </textarea>
                        </td>
                    </tr>
                    <tr>
                        <th style="text-align: center">用户头像(24*24)</th>
                        <td>
                            <div>
                                <input type="hidden" name="headerimg" class="form-control"
                                       id="js-thumbnail-input2" required>
                                <div>
                                    <a href="javascript:uploadOneImage('图片上传','#js-thumbnail-input2');">
                                        <img src="__TMPL__/public/assets/images/default-thumbnail.png"
                                             id="js-thumbnail-input2-preview"
                                             width="135" style="cursor: pointer"/>
                                    </a>
                                    <input type="button" class="btn btn-sm btn-cancel-thumbnail2" value="取消图片"><font style="color: red">请把图片大小控制在100k以内！</font>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th style="text-align: center">昵称：</th>
                        <td><input type="text" value="" class="form-control" name="nickname"  /></td>
                    </tr>

                </table>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('ADD')}</button>
                        <a class="btn btn-default" href="{:url('AdminGuests/index')}">{:lang('BACK')}</a>
                    </div>
                </div>
            </div>

        </div>
    </form>
</div>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>

<script type="text/javascript">

    $(function(){
        $('.btn-cancel-thumbnail').click(function () {
            $('#js-thumbnail-input-preview').attr('src', '__TMPL__/public/assets/images/default-thumbnail.png');
            $('#js-thumbnail-input').val('');
        });

        $('.btn-cancel-thumbnail2').click(function () {
            $('#js-thumbnail-input2-preview').attr('src', '__TMPL__/public/assets/images/default-thumbnail.png');
            $('#js-thumbnail-input2').html('');
        });
    });
</script>

</body>
</html>